<template>
	<!--注册-->
	<div class="am-u-lg-6 am-u-lg-offset-3 box">
		<h2 class="title">
			<a :class="{'cur': $route.path == '/login'}" v-link="{path:'/login'}">登录</a> ●
			<a :class="{'cur': $route.path != '/login'}" v-link="{path:'/login/register'}">注册</a>
		</h2>
		<router-view transition="expand" transition-mode="out-in"></router-view>
		<div class="animate-box">
			<div class="animate1"></div>
			<div class="animate2"></div>
		</div>
	</div>
</template>
<style>
	.title{
		text-align:center;
		font-size:25px;
		line-height:1.75;
		font-family: "微软雅黑";
	}
	.title a{
		display:inline-block;
		color:#555555;
	}
	.title .cur{
		color:#0e90d2;
	}
	.box{
		margin-top:200px!important;
	}
	/*动画*/
	.animate-box{
		width:50px;
		height:50px;
		position:relative;
		margin:50px auto;
	}
	.animate-box div{
		width:100%;
		height:100%;
		border-radius:50%;
		background:#f66;
		position:absolute;
		top:0;
		left:0;
		overflow:hidden;
	}
	.animate-box .animate1{
		opacity:0.4;
		transform:scale(0);
		animation:animate2 1s infinite ease-in-out;
	}
	.animate-box .animate2{
		opacity:0.6;
		transform:scale(1);
		animation:animate1 1s infinite ease-in-out;
	}
	@keyframes animate1{
		from{
			transform:scale(0);
		}
		to{
			transform:scale(1);
		}
	}
	@keyframes animate2{
		from{
			transform:scale(1);
		}
		to{
			transform:scale(0);
		}
	}
.expand-transition {
  transition: all .3s ease;
  height: auto;
  padding: 10px;
  overflow: hidden;
}

/* .expand-enter 定义进入的开始状态 */
/* .expand-leave 定义离开的结束状态 */
.expand-enter, .expand-leave {
  height: 0;
  padding:0 10px;
}
</style>